<!DOCTYPE HTML>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<title>无缝滚动</title>
		<style>
		*{
			padding:0;
			margin:0;
			text-decoration: none;
			list-style: none;
		}
			#div1{
				width:960px;
				height:150px;
				margin:100px auto;
				overflow: hidden;
				background:pink;
				position: relative;
			}
			#div1 ul{
				position: absolute;
				top:0;
				left: 0;
			}
			
			#div1 ul li{
				float:left;
				width:240px;
				height:150px;
			}
			#div1 img{
				width:100%;
			}
		</style>
		<script>
			window.onload=function(){
				var odiv=document.getElementById('div1');
				var oul=odiv.getElementsByTagName('ul')[0];
				var aLi=odiv.getElementsByTagName('li');
				var speed=10;
				      oul.innerHTML+=oul.innerHTML;
				      oul.style.width=aLi[0].offsetWidth*aLi.length+'px';

				       function move(){
				      	if(oul.offsetLeft<-oul.offsetWidth/2)
				      	{oul.style.left='0';
				  		}
				  		else if(oul.offsetLeft>0)
				  		{
				  			oul.style.left=-oul.offsetWidth/2+'px';
				  		}
				  		oul.style.left=oul.offsetLeft+speed+'px';
				      }
				      var timer=setInterval(move,30);
				      oul.onmouseover=function(){
				      	clearInterval(timer);
				      }
				      oul.onmouseout=function(){
				     		timer=setInterval(move,30);
				      }
				     document.getElementById('btn1').onclick=function(){
				      	speed=-2;
				      }
				      document.getElementById('btn2').onclick=function(){
				      	speed=2;
				      }

			}
		</script>
	</head>
	<body>
	<input type="button" value="向左" id="btn1">
	<input type="button" value="向右" id="btn2">
		<div id="div1">
			<ul>
			<li><img src="./film/fj1.jpg" alt="加载失败"/></li>
			<li><img src="./film/fj2.jpg" alt="加载失败"/></li>
			<li><img src="./film/fj3.jpg" alt="加载失败"/></li>
			<li><img src="./film/fj4.jpg" alt="加载失败"/></li>
			</ul>
		</div>
	</body>
</html>